Axis Styling - Styling Gridlines, Tick Lines and Labels

SciChart allows you to style every aspect of an axis, including grid lines, tick marks, and axis labels. This gives you the flexibility to create custom chart appearances tailored to your application’s visual needs.

Styling Grid Lines

Grid lines in SciChart are rendered by the axes: Y-axes produce horizontal lines, and X-axes produce vertical ones. There are two types of grid lines—major and minor. Major grid lines correspond to axis labels, while minor grid lines appear in between.

You can control the visibility of grid lines using the DrawMajorGridLines and DrawMinorGridLines properties on each axis. To customize their appearance, define a Style with TargetType="Line" and assign it to the MajorGridLineStyle or MinorGridLineStyle properties of the axis.

For example:

Styling Axis Gridlines	Copy Code
<s:NumericAxis> <s:NumericAxis.MajorGridLineStyle> <Style TargetType="Line"> <Setter Property="Stroke" Value="GreenYellow" /> <Setter Property="StrokeThickness" Value="1" /> <Setter Property="StrokeDashArray" Value="10 5" /> </Style> </s:NumericAxis.MajorGridLineStyle> </s:NumericAxis>

Styling Axis Gridlines

Copy Code

            <s:NumericAxis>
                <s:NumericAxis.MajorGridLineStyle>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="GreenYellow" />
                        <Setter Property="StrokeThickness" Value="1" />
                        <Setter Property="StrokeDashArray" Value="10 5" />
                    </Style>
                </s:NumericAxis.MajorGridLineStyle>
            </s:NumericAxis>

Styling Axis Ticks

Axis ticks appear next to axis labels and can also be either major or minor. Major ticks align with labels, while minor ticks appear between them. You can disable ticks using the DrawMajorTicks and DrawMinorTicks properties.

To customize tick appearance, apply a Style with TargetType="Line" to the MajorTickLineStyle or MinorTickLineStyle properties. Tick length can be adjusted using the X2 or Y2 properties within the style definition.

Here’s an example:

Styling Axis Ticks	Copy Code
<s:NumericAxis> <s:NumericAxis.MajorTickLineStyle> <Style TargetType="Line"> <Setter Property="Stroke" Value="GreenYellow" /> <Setter Property="StrokeThickness" Value="1" /> <Setter Property="X2" Value="8" /> <Setter Property="Y2" Value="8" /> </Style> </s:NumericAxis.MajorTickLineStyle> </s:NumericAxis>

Styling Axis Ticks

Copy Code

            <s:NumericAxis>
                <s:NumericAxis.MajorTickLineStyle>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="GreenYellow" />
                        <Setter Property="StrokeThickness" Value="1" />
                        <Setter Property="X2" Value="8" />
                        <Setter Property="Y2" Value="8" />
                    </Style>
                </s:NumericAxis.MajorTickLineStyle>
            </s:NumericAxis>

Styling Axis Labels

For basic customization of axis labels, you can use the TickTextBrush and FontSize properties to control text color and size

For more advanced styling, define a Style with TargetType="s:DefaultTickLabel" and apply it to the axis. This allows you to modify alignment, rotation, margins, and other layout properties of axis labels.

For example, the following style aligns labels to the right on a left-positioned Y-axis:

Styling Axis Labels	Copy Code
<s:NumericAxis AxisAlignment="Left"> <s:NumericAxis.TickLabelStyle> <Style TargetType="s:DefaultTickLabel"> <!-- Align labels to the left side --> <Setter Property="HorizontalAnchorPoint" Value="Right"/> </Style> </s:NumericAxis.TickLabelStyle> </s:NumericAxis>

Styling Axis Labels

Copy Code

            <s:NumericAxis AxisAlignment="Left">
                <s:NumericAxis.TickLabelStyle>
                    <Style TargetType="s:DefaultTickLabel">
                        <!-- Align labels to the left side -->
                        <Setter Property="HorizontalAnchorPoint" Value="Right"/>
                    </Style>
                </s:NumericAxis.TickLabelStyle>
            </s:NumericAxis>

Advanced Label Styling with Label Provider

If you require per-label customization, you can use the LabelProvider API, which allows you to individually control the formatting and styling of axis labels based on custom logic. More information is available in our dedicated LabelProvider article: "Axis Styling - Styling Axis Labels with LabelProvider"

Styling Example

Below is a complete markup example demonstrating how to apply various axis styling options in a chart layout:

Styling Axis Gridlines, Tick Lines and Labels	Copy Code
<Grid> <Grid.Resources> <Style x:Key="MajorGridLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="Red"/> </Style> <Style x:Key="MinorGridLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="#55FFFFFF"/> </Style> <Style x:Key="MajorTickLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="Red"/> <Setter Property="X2" Value="10"/> </Style> <Style x:Key="MinorTickLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="#55FFFFFF"/> <Setter Property="X2" Value="3"/> </Style> </Grid.Resources> <!-- Create the chart surface --> <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" --> <s:SciChartSurface> <!-- Create XAxis --> <s:SciChartSurface.XAxis> <s:NumericAxis TickTextBrush="Red" AxisTitle="Styled XAxis" DrawMajorBands="True" DrawMajorGridLines="True" DrawMinorGridLines="True" DrawMajorTicks="True" DrawMinorTicks="True" AxisBandsFill="#554682B4" MajorGridLineStyle="{StaticResource MajorGridLineStyle}" MinorGridLineStyle="{StaticResource MinorGridLineStyle}" MajorTickLineStyle="{StaticResource MajorTickLineStyle}" MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/> </s:SciChartSurface.XAxis> <!-- Create YAxis --> <s:SciChartSurface.YAxes> <s:NumericAxis AxisTitle="Primary YAxis" AxisAlignment="Left" AxisBandsFill="#554682B4" TickTextBrush="Green" MajorGridLineStyle="{StaticResource MajorGridLineStyle}" MinorGridLineStyle="{StaticResource MinorGridLineStyle}" MajorTickLineStyle="{StaticResource MajorTickLineStyle}" MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/> <s:NumericAxis Id="SecondaryYAxisId" AxisTitle="Secondary YAxis" AxisAlignment="Right" TickTextBrush="Orange"/> </s:SciChartSurface.YAxes> </s:SciChartSurface> </Grid>

Styling Axis Gridlines, Tick Lines and Labels

Copy Code

<Grid>
   <Grid.Resources>
      <Style x:Key="MajorGridLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="Red"/>
      </Style>
         <Style x:Key="MinorGridLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="#55FFFFFF"/>
      </Style>
      <Style x:Key="MajorTickLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="Red"/>
         <Setter Property="X2" Value="10"/>
      </Style>
      <Style x:Key="MinorTickLineStyle" TargetType="Line">
         <Setter Property="Stroke" Value="#55FFFFFF"/>
         <Setter Property="X2" Value="3"/>
      </Style>
   </Grid.Resources>
  
   <!--  Create the chart surface  -->
   <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
   <s:SciChartSurface>

      <!--  Create XAxis  -->
      <s:SciChartSurface.XAxis>
      <s:NumericAxis TickTextBrush="Red" AxisTitle="Styled XAxis" DrawMajorBands="True" DrawMajorGridLines="True"      
         DrawMinorGridLines="True"
         DrawMajorTicks="True" DrawMinorTicks="True"
         AxisBandsFill="#554682B4"                              
         MajorGridLineStyle="{StaticResource MajorGridLineStyle}"
         MinorGridLineStyle="{StaticResource MinorGridLineStyle}"
         MajorTickLineStyle="{StaticResource MajorTickLineStyle}"
         MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/>
      </s:SciChartSurface.XAxis>

      <!--  Create YAxis  -->
      <s:SciChartSurface.YAxes>
         <s:NumericAxis AxisTitle="Primary YAxis" AxisAlignment="Left"
            AxisBandsFill="#554682B4"
            TickTextBrush="Green"       
            MajorGridLineStyle="{StaticResource MajorGridLineStyle}"
            MinorGridLineStyle="{StaticResource MinorGridLineStyle}"
            MajorTickLineStyle="{StaticResource MajorTickLineStyle}"
            MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/>
         <s:NumericAxis Id="SecondaryYAxisId" AxisTitle="Secondary YAxis" AxisAlignment="Right" TickTextBrush="Orange"/>
      </s:SciChartSurface.YAxes>
   </s:SciChartSurface>
</Grid>